<template>
	<view class="bgcolor" :class="{bgcolos:daily==1}">
		<view :style="isShowPos ? '' : 'display:none;'">
			<!-- 情绪或者肥胖 v-if="isShowPos" -->
			<block v-if="daily==3">
				<aypnia></aypnia>
			</block>
			<!-- 上火 -->
			<block v-if="daily==2">
				<inflamed></inflamed>
			</block>

			<!-- 日常 -->
			<block v-if="daily==1">
				<everyday></everyday>
			</block>

			<!-- 体质  -->
			<block v-if="daily==5">
				<physique></physique>
			</block>

			<!-- 正常 -->
			<block v-if="daily==0">
				<mood></mood>
			</block>

			<!-- 情绪 -->
			<block v-if="daily==4">
				<moodes></moodes>
			</block>
			<!-- v-if="isShowGif==0 && daily!=5 && isshowGifBton" -->
			<!--  v-if="isButton"  -->
			<view class="gifs contenr" @click="getHaib"  v-if="isShowGif==0 && daily!=5 && isshowGifBton">
				<image src="../../../static/img/bton.gif" mode="aspectFit" class="gifImg"></image>
			</view>
			<view class="botn contenr " v-if="isButton" :class="{btnItmes:daily ==1}">
				<button open-type="share" class="btongs" :class="{btnItmes_1:daily ==1}">
					<image src="../../../static/img/charts.png" mode="aspectFit" class="active" v-if="daily !=1"></image>
					<view class="items contenr" v-if="daily ==1">
						<image src="../../../static/img/shares.png" mode="aspectFit" class="shares"></image>
						<text>喊朋友一起测</text>
					</view>
					<!-- v-else<image src="../../../static/img/charts1.png" mode="aspectFit" class="active" v-if="daily ==1"></image> -->
				</button>

			</view>
		</view>
		<view class="kongs"></view>
		<view class="bgsCx dis dis5 dis2 " :class="[tys=='口腔溃疡'?'bgsCx1':(tys=='上火'?'bgsCx2':(tys=='脱发'?'bgsCx3':(tys=='便秘'?'bgsCx4':(tys=='痛经'?'bgsCx5':(tys=='肥胖'?'bgsCx6':(tys=='失眠'?'bgsCx7':(tys=='情绪'?'bgsCx8':'')))))))]"
		 :style="!isShowPos ? '':'display:none;' ">
		 <view >
		 	<view class="kongs">
				<view class="delImg" v-if="!isShowPos" @click="coosel">
					<image src="../../../static/img/dels1.png" mode="aspectFit" class="delImgimages"></image>
				</view>
			</view>
		 	<view class="bgCanen">
		 		<view class="pc-container">
		 			<image show-menu-by-longpress :src="imgurl" mode="aspectFill" v-if="!canvasShow"></image>
		 			<canvas canvas-id="mycanvas" style="width: 650rpx;height: 1000rpx;position: absolute;left: 800rpx;" v-if="canvasShow"></canvas>
		 		</view>
		 	</view>
		 	<view class="botms dis contenr">长按图片可分享或保存哟～
		 		<!-- <view class="btons_1 contenr" @click="saveImage">保存图片</view>
		 		<button open-type="share" class="btons_s contenr">分享好友</button> -->
		 	</view>
		 </view>
			
		</view>
		
	</view>
</template>

<script>
	let app = getApp().globalData;
	let time = 0;
	// import config from ''
	import config from '@/common/js/config.js'
	import aypnia from "@/components/aypniaResult.vue";
	import inflamed from "@/components/inflamed.vue";
	import everyday from '@/components/everyday.vue';
	import physique from '@/components/physique.vue';
	import mood from '@/components/mood.vue';
	import moodes from '@/components/moodes.vue';
	export default {
		components: {
			aypnia,
			inflamed,
			everyday,
			physique,
			mood,
			moodes
		},
		data() {
			return {
				is: false,
				daily: -1, //日常体检显示
				isButton: false, //分享按钮是否显示
				// texts:''
				isShowPos: true,
				canvasShow: true,
				imgurl: '',
				toux: '',
				bgImgUrl: '',
				name: app.user.nickname || uni.getStorageSync('userInfo').nickName,
				sex: this.setSex(),
				isShowGif: this.inflamed(),
				isIPX: app.system,
				indexP: 0,
				bton: `${config.imgUrl}bton.gif`,
				isshowGifBton: true,
				rpx: 0,
				tys: app.resultData.type,
				isIPXs:app.isIPX
			};
		},
		onLoad(e) {
			console.log(e)
			console.log(app.resultData)
			let that = this;
			if (e.userid) {
				app.reportid = e.reportid;
				that.daily = 1;
				app.uid = e.userid;
				console.log('sssss')
			};
			if (e.daily) {
				that.daily = e.daily;
				that.isButton = true
			};


		},
		created() {
			let https = config.BaseUrl;
			let resultData = app.resultData;
			if (!resultData.shareresultpic) {
				return
			}
			// if (https.search('https://api')) {
			// 	console.log('转换')
				resultData.shareresultpic = resultData.shareresultpic.replace('http://', 'https://')
				app.resultData = resultData
			// }
			let urls = app.resultData.shareresultpic;
			let userImg = app.user.avatarUrl || uni.getStorageSync('userInfo').avatarUrl;
			this.imgurl = urls;
			this.wxdownloadFile(urls).then(res => {
				this.bgImgUrl = res.tempFilePath;
			})
			this.wxdownloadFile(userImg).then(res => {
				this.toux = res.tempFilePath;
			})
		},
		mounted() {
			if (app.resultData.shareresultpic == '' || !app.resultData.shareresultpic) {
				this.isshowGifBton = false;
			}
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.rpx = res.windowWidth / 375;
				},
			})

		},
		methods: {
			showImgs() {
				this.isIPX = true
			},
			inflamed(){
				let infl = app.inflamed;
				if(app.indexRults==1){
					infl=0
				}
				return infl;
			},
			coosel() {
				this.indexP = 1;
				this.isShowPos = true;
			},
			setSex() {
				let sex = app.user.sex || uni.getStorageSync('userInfo').gender;
				let text = '未知';
				if (sex == 1) {
					text = '男';
				} else if (sex == 2) {
					text = '女';
				} else {
					text = '未知';
				}
				return text;
			},
			getHaib() {
				this.isShowPos = false;
				app.dataRes = true;
				if (this.indexP == 1) {
					return
				}
				this.canvasImage()
			},
			wxdownloadFile(url) {
				let that = this;
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url: url,
						success: res => {
							console.log(`缓存地址：${res.tempFilePath}`);
							resolve(res)
						},
						fail: res => {
							console.log(`缓存失败：${res.errMsg}`);
						}
					})
				})
			},
			canvasImage(url) {
				// console.log('app', app)
			
				console.log('wotesfsaf ')
				// clearInterval(time)
				// time = null
				let that = this;
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// })
				let myCanvas = uni.createCanvasContext('mycanvas');
				myCanvas.drawImage(this.bgImgUrl, 0, 0, 325 * this.rpx, 500 * this.rpx);
				let ty = app.resultData.type;
				myCanvas.fillStyle = '#547FFF';
				let fontSize = 13;
				myCanvas.font = `${fontSize}px Arial`; //绘制文字
				let x = 0,
					y = 0,
					z = 0,
					p = 0,
					t = 0,
					s = 0,
					wit = 50 * this.rpx,
					hig = 50 * this.rpx;
				/*
				 * x,y,头像的坐标点，
				 * z,p、昵称的坐标点
				 * t，s,性别的坐标点
				 */
				if (ty == '便秘' || ty == '脱发') {
					x = 244 * this.rpx;
					y = 111 * this.rpx;
					z = 110 * this.rpx;
					p = 126 * this.rpx;
					t = 110 * this.rpx;
					s = 153 * this.rpx
				} else if (ty == '口腔溃疡' || ty == '失眠') {
					z = 25 * this.rpx;
					p = 52 * this.rpx;
					myCanvas.fillStyle = '#FFFFFF';
				} else if (ty == '肥胖') {
					x = 25 * this.rpx;
					y = 30 * this.rpx;
					z = 105 * this.rpx;
					p = 45 * this.rpx;
					wit = 62 * this.rpx;
					hig = 62 * this.rpx;
				} else if (ty == '情绪') {
					x = 30 * this.rpx;
					y = 435 * this.rpx;
					z = 30 * this.rpx;
					p = 485 * this.rpx;
					// t = 110;
					// s = 153
					wit = 35 * this.rpx;
					hig = 35 * this.rpx;
					myCanvas.fillStyle = '#222222';
				} else if (ty == '上火') {
					x = 240 * this.rpx;
					y = 30 * this.rpx;
					z = 30 * this.rpx;
					p = 35 * this.rpx;
					myCanvas.fillStyle = '#FFFFFF';
				} else {
					x = 210 * this.rpx;
					y = 118 * this.rpx;
					z = 60 * this.rpx;
					p = 143 * this.rpx;
					t = 60 * this.rpx;
					s = 185 * this.rpx;
					wit = 90 * this.rpx;
					hig = 90 * this.rpx;
				}
				if (ty != '口腔溃疡' && ty != '失眠' && ty != '痛经') {
					myCanvas.save();
					//绘制头像
					myCanvas.beginPath(); //开始绘制
					//先画个圆，前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
					myCanvas.arc(wit / 2 + x, hig / 2 + y, hig / 2, 0, Math.PI * 2, false);
					myCanvas.clip(); //画好了圆 剪切  原始画布中剪切任意形状和尺寸。
					// 一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因A
					myCanvas.drawImage(this.toux, x, y, wit, hig)
					myCanvas.restore();

					if (ty != '情绪') {
						myCanvas.fillText(this.sex, t, s);
					}
				}
				if (ty == '痛经') {
					myCanvas.drawImage(this.toux, x, y, wit, hig);
					// myCanvas.drawImage(url, x, y, wit, hig)
					myCanvas.fillText(this.sex, t, s);
				}
				let names = this.name;
				if (names.length >6) {
					names = `${names.substring(0,6)}*`
				}
				myCanvas.fillText(names, z, p);

				//开始绘画，必须调用这一步，才会把之前的一些操作实施
				myCanvas.draw(true, () => {
					uni.canvasToTempFilePath({
						canvasId: 'mycanvas',
						success: (res) => {
							// 在H5平台下，tempFilePath 为 base64
							this.imgurl = res.tempFilePath;
							console.log('图片生成', res.tempFilePath)
							this.canvasShow = false;
							// uni.hideLoading();
							// uni.setStorageSync('person-card', this.imgurl);
						},
						fail: () => {
							this.canvasImage()
						}
					});
				});

			},
			saveImage() {
				uni.showActionSheet({
					itemList: ['保存图片'],
					success: (res) => {
						if (res.tapIndex == 0) {
							uni.saveImageToPhotosAlbum({
								filePath: this.imgurl, //    图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径
								success: () => {
									uni.showToast({
										title: '保存成功',
										duration: 2000,
										icon: 'none'
									});
									this.isShowPos = true
								},
								fail: () => {
									uni.showToast({
										title: '保存失败',
										duration: 2000,
										icon: 'none'
									});
								}
							});
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}
		},
		onShareAppMessage: function(e) {
			// let title = `${app.user.nickname}的体检结果`;
			let title = '欢迎加入养生大军！';
			let uid = uni.getStorageSync('uid');
			let reportid = app.reportid;
			let daily = this.daily;
			let url = '';
			url = app.resultData ? app.resultData.sharepic : 'http://r.punkyangsheng.com/common/img/share.png';
			if (daily == 1) {
				url = 'http://r.punkyangsheng.com/common/img/share.png'
			}
			let path = `/pages/index/index`
			console.log('path', path)
			return {
				title: title,
				imageUrl: url,
				path: path
			}
		},
		// onShareTimeline: function() {
		// 	let title = `拯救罪恶感，一起朋克养生！`;
		// 	return {
		// 		title: title,
		// 		path: '/pages/index/index'
		// 	}
		// },
		onHide() {
			this.indexP = 0;
			// time=0;
		}
	}
</script>

<style lang="scss">
	@import "../../../common/css/flex.css";
	@import "../../../common/css/index.scss";

	.bgcolor {
		background-color: #FBF2D6;
	}

	.bgcolos {
		background-color: #fff;
	}

	.gifs {
		width: 100%;
		height: 117upx;
		// margin: 150upx 0 22upx 0;
		margin-top: 105upx;
		.gifImg {
			width: 470upx;
			height: 117upx;
		}
	}

	.botn {
		width: 100%;
		height: 160upx;
		display: flex;
		bottom: 0;
		// margin-bottom: 80upx;
		.btongs {
			padding: 0;
			width: 452upx;
			height: 88upx;
			margin: 0;
			border: none;
			padding: 0;
			// opacity: 0.1;
			// border-radius: 40upx;
			border-radius: 44upx;

			// background: #FFD344;
			.active {
				width: 452upx;
				height: 88upx;
			}

			.items {
				width: 452upx;
				height: 88upx;
				border-radius: 44upx;
				background: #FFD344;

				.shares {
					width: 32upx;
					height: 32upx;
					margin-right: 6upx;
				}

				text {
					font-size: 32upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}

		.btnItmes_1 {
			box-shadow: 0px 9upx 25upx 0px #FFE07A;
		}

		.btnItmes {
			background-color: #F8F8F8;
		}
	}
	.isIPX{
		padding-bottom: 60upx;
	}

	.bgsCx {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 9;
		background-color: rgba(0, 0, 0, 0.7);
		bottom: 0;

		.kongs {
			width: 100%;
			height: 100upx;
			position: relative;
			.delImg {
				width: 50upx;
				height: 50upx;
				position: absolute;
				bottom: 10upx;
				right: 0;
				z-index: 99;
			
				.delImgimages {
					width: 50upx;
					height: 50upx;
				}
			}
		}

		.bgCanen {
			width: 650upx;
			height: 1000upx;
			// margin: auto;
			// background-color: #fff;

			.pc-container {
				width: 650upx;
				height: 1000rpx;
				margin: 0 auto;
				// padding-top: 46rpx;
				overflow: hidden;

				image {
					width: 99%;
					height: 1000rpx;
					display: block;
				}
			}
		}

		.botms {
			width: 650upx;
			height: 70upx;
			margin: auto;
			margin-top: 0upx;
			font-size: 34upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;

			.btons_1 {
				width: 275upx;
				height: 80upx;
				background: #FFFFFF;
				box-shadow: 0px 9upx 0upx 0upx #222222;
				border-radius: 40upx;
				border: 1upx solid #222222;
			}

			.btons_s {
				width: 275upx;
				height: 80upx;
				background: #FFD344;
				box-shadow: 0px 9upx 0upx 0upx #222222;
				border-radius: 40upx;
				border: 1upx solid #222222;
			}
		}
	}

	.imagesTis {
		width: 499upx;
		height: 132upx;
		position: absolute;
		top: 0upx;
		right: 10upx;
		z-index: 999;

		.sharshImg {
			width: 499upx;
			height: 132upx;
		}
	}

	// .delImg {
	// 	width: 50upx;
	// 	height: 50upx;
	// 	position: absolute;
	// 	top: 33upx;
	// 	right: 46upx;
	// 	z-index: 99;

	// 	.delImgimages {
	// 		width: 50upx;
	// 		height: 50upx;
	// 	}
	// }

	.bgsCx1 {
		background: linear-gradient(180deg, #EFF4FF 0%, #A0AFFF 100%);
	}

	.bgsCx2 {
		background: linear-gradient(180deg, #FFE7E1 0%, #FFB6B6 100%);
	}

	.bgsCx3 {
		background: linear-gradient(180deg, #B5D7FF 0%, #8AA6FF 100%);
	}

	.bgsCx4 {

		background: linear-gradient(180deg, #FFEAA9 0%, #FFCC67 100%);
	}

	.bgsCx5 {

		background: linear-gradient(180deg, #FFD0DD 0%, #FF8FAA 100%);
	}

	.bgsCx6 {

		background: linear-gradient(180deg, #C8CFFF 0%, #9EA0FF 100%);
	}

	.bgsCx7 {

		background: linear-gradient(180deg, #D1E6FF 0%, #99B1FF 100%);
	}

	.bgsCx8 {

		background: linear-gradient(180deg, #DCECFF 0%, #B3C5FF 100%);
	}
	.kongs{
		width: 100%;
		height: 60upx;
	}
</style>
